<template>
    <van-form @submit="$emit('onSubmit', form)" class="xm-form">
        <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="form.password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[
                { required: true, message: '请填写密码' },
                {
                    validator: (value) => value.length >= 6,
                    message: '密码不能少于6位',
                },
            ]"
        />
        <van-button
            type="primary"
            :class="{ 'xm-from-submit': true, [btnClass]: true }"
            >{{ btnText }}</van-button
        >
    </van-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: 'yaopeng',
        password: '123456'
      }
    }
  },
  props: {
    btnText: {
      type: String,
      default: '登录'
    },
    btnClass: String
  }
}
</script>

<style lang="less" scoped>
@btnLoginColor: #fa6e1c;
@btnRegisterColor: #0dc161;
@btnMargin: 16px;

.xm-form {
    .xm-from-submit {
        width: calc(100% - @btnMargin * 2);
        margin: 20px @btnMargin;
    }
    .xm-login-submit {
        background: @btnLoginColor;
        border-color: @btnLoginColor;
    }
    .xm-register-submit {
        background: @btnRegisterColor;
        border-color: @btnRegisterColor;
    }
}
</style>
